<template>
  <el-card class="box-card">
    <div slot="header">{{$t('m.config.resetPassword')}}</div>
    <el-form ref="form" :model="formInline" :rules="ruleForm" label-width="120px" size="small">
      <el-row>
        <el-col :span="20">
          <el-form-item :label="$t('m.config.origpassword')">
            <el-input maxlength="11" show-word-limit v-model.trim="formInline.origpassword" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item :label="$t('m.config.password')" prop="password">
            <el-input type="password" v-model.trim="formInline.password" maxlength="11" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="20">
          <el-form-item :label="$t('m.config.passwordConfirm')" prop="passwordConfirm">
            <el-input type="password" v-model.trim="formInline.passwordConfirm" maxlength="11" autocomplete="off"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24" align="right">
          <el-button @click="reset" size="small">{{$t('m.config.reset')}}</el-button>
          <el-button type="primary" @click="submit" size="small" :loading="btnLoading">{{$t('m.confirm')}}</el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>
<script>
import { Encrypt } from '@/utils/encode'
import { formValidate } from '@/assets/mixins/rule/reset-password-validate'
export default {
  name:'reset-password',
  mixins:[formValidate],
  data(){
    return {
      formInline:{
        origpassword:'', // 原始密码
        password:'', // 新密码
        passwordConfirm:'' // 确认密码
      },
      btnLoading:false // 控制按钮loading，防止重复提交
    }
  },
  mounted(){

  },
  methods:{
    // 确认
    submit(){
      this.$refs['form'].validate((valid)=>{
        if(valid){
          if(this.formInline.origpassword===this.formInline.password) return this.callbackMessage('原始密码与新密码一致，无需更改')
          let id = this.$store.state.basicInfo.userInfo.id
          let formInline = {}
          for(let key in this.formInline){
            formInline[key] = Encrypt(this.formInline[key]) // 遍历用户输入项，并加密
          }
          let options = {
            method:'put',
            url:`${window._config_.userConfig}/zegooauth/user/updatepassword`,
            data:Object.assign({}, formInline, {id})
          }
          this.btnLoading = true
          this.$axios(options).then(() => {
            this.btnLoading = false
            this.$alert('已成功修改密码，请重新登录', '修改密码', {
              confirmButtonText:'确定',
              callback:()=>{
                sessionStorage.clear()
                this.$store.replaceState(Object.assign({},this.cloneObject(this.$store.state.reset.initState),{reset:this.$store.state.reset})) // 重置vuex的state
                this.$router.push({ name:'login' })
              }
            })
          }).catch(()=>{
            this.btnLoading = false
          })
        }
      })
    },
    // 重置
    reset(){
      this.formInline.origpassword =
        this.formInline.password =
        this.formInline.passwordConfirm = ''
    }
  }
}
</script>
<style lang="scss" scoped>
.el-card{
  width: 50%; min-width: 500px; font-size: 18px;
}
.isValidated{
  line-height: 40px; font-size: 24px; color: #67C23A; padding-left: 20px;
}
</style>